<template>
  <div class="myLoginModalOuter" v-show="isShowModal">
    <div class="myLoginModalBox">
      <span class="loginNotice">
        您正在进入
        <b>{{headTitle}}</b>,需要您对该服务进行授权,授权成功后,您购买的该服务将即刻激活。
      </span>
      <div class="loginModal">
        <div class="loginContent">
          <span class="loginTel"> 
            <input
              placeholder="请输入您的手机号码"
              v-model="telNumber"
              type="number"
              oninput="if(value.length>11)value=value.slice(0,11)"
              v-on:blur="blurAdjust"             
            />
          </span>
          <span class="flex-h loginYzm">
            <span class="flex1">
              <input
                placeholder="请输入验证码"
                v-model="yzmNumber"
                type="number"
                oninput="if(value.length>6)value=value.slice(0,6)"
                 v-on:blur="blurAdjust"    
              />
            </span>
            <b @click="sendLoginYzm" :class="showyzm?'':'loginYzmGray'">{{yzmMsg}}</b>
          </span>
          <button v-on:click="loginVerification"  :class="['loginBtn',btnIsClick?'':'loginBtnGray']">确定</button>
        </div>
      </div>
      <img src="~/static/images/tubiao_shouquanguanli_active.png" class="markImg" alt />
    </div>
  </div>
</template>

<script>
import { sendMessageCode } from "~/api/identity";
import xInput from "~/components/xInput";
import ls from "store2";
export default {
  props: {
    // headtitle: String,
    // ser: String,
    // porve:String
    isShowModal: Boolean,
    headTitle: String
  },
  components: {
    xInput
  },
  data() {
    return {
      btnIsClick: false,
      yzmMsg: "点击获取",
      showyzm: false,
      telNumber: "",
      yzmNumber: "",
      timer: null,
      nNum: 60,
      // isShowModal: false
    };
  },

  computed: {},
  watch: {
    //vals3验证码手机号 vals4 验证码

    telNumber(e) {
      const reg = /^1[3456789]\d{9}$/;
      if (reg.test(e)) {
        this.showyzm = true;
        if (this.yzmNumber.length > 3) {
          this.btnIsClick = true;
        } else {
          this.btnIsClick = false;
        }
      } else {
        this.showyzm = false;
        this.btnIsClick = false;
      }
    },
    yzmNumber(e) {
      const reg = /^1[3456789]\d{9}$/;
      if (e.length > 3 && reg.test(this.telNumber)) {
        this.btnIsClick = true;
      } else {
        this.btnIsClick = false;
      }
    }
  },
  mounted: function() {

  
  },
  methods: {
    blurAdjust(){
      window.scroll(0,0)
    },
    goto(routerName, queryData) {
      this.$router.push({
        path: routerName,
        query: {
          type: queryData
        }
      });
    },
    sures() {
      this.$emit("btnClick");
    },

    sendLoginYzm() {
      if (this.nNum < 60) {
        this.$vux.toast.text("请稍后发送");
        return false;
      }
      if (this.showyzm == false) {
        this.$vux.toast.text("请输入正确11位手机号码");
        return false;
      }

      this.senyam();
      sendMessageCode({
          codeType: 1,
          mobile: this.telNumber
        })
        .then(res => {
          this.$vux.toast.text(res.message);
        })
        .catch(error => {
          this.$vux.toast.text(error);
        });
    },
    senyam() {
      this.showyzm = false;

      this.timer = setInterval(() => {
        this.nNum -= 1;
        this.yzmMsg = "重新获取" + this.nNum;
        if (this.nNum <= 0) {
          clearInterval(this.timer);
          // yzm.className += ' send';
          this.yzmMsg = "点击获取";
          this.showyzm = true;
          this.nNum = 60;
        }
      }, 1000);
    },
    loginVerification() {
      let loginTime = new Date().getTime();
      if (this.btnIsClick) {
        let _this = this;
        let loginObj={
           account: this.telNumber,
            credentials: this.yzmNumber,
            loginTime: loginTime,
            verifyType: 2
        }
        this.$emit("fromChildloginVerification",loginObj)
     
      } else {
        this.$vux.toast.text("请填写完整信息");
      }
    }
  }
};
</script>


<style scoped lang="less">
.myLoginModalOuter {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  .myLoginModalBox {
    width: 6.4rem;
    height: 7.2rem;
    background: rgba(255, 255, 255, 1);
    border-radius: 0.1rem;
    position: relative;
    .loginNotice {
      display: block;
      margin-top: 1.04rem;
      padding: 0 0.3rem;

      font-size: 0.3rem;
      font-family: "PingFangSC-Semibold";
      font-weight: 600;
      color: rgba(34, 34, 34, 1);
      line-height: 0.48rem;
      box-sizing: border-box;
      b {
        font-size: 0.3rem;
        color: @mainColor;
        font-weight: 600;
      }
    }
    .markImg {
      position: absolute;
      width: 1.8rem;
      height: 1.86rem;
      left: 2.27rem;
      top: -0.93rem;
    }
    .loginModal {
      overflow: hidden;
      padding: 0 0.3rem;
      .loginContent {
        width: 100%;

        .loginTel {
          display: block;
          width: 100%;
          // background:rgba(255,255,255,1);
          height: 0.9rem;
          border-radius: 0.1rem;
          border: 0.01rem solid rgba(229, 232, 237, 1);
          padding: 0.01rem;
          box-sizing: border-box;
          margin-top: 0.5rem;
          input {
            display: block;
            outline: none;
            border: none;
            width: 100%;
            height: 0.86rem;
            padding: 0.2rem 0.3rem;
            box-sizing: border-box;

            font-size: 0.28rem;
            font-family: "PingFangSC-Regular";
            font-weight: 400;
            color: rgba(34, 34, 34, 1);
          }
        }
        .loginYzm {
          margin-top: 0.2rem;
          span {
            width: 100%;

            height: 0.9rem;
            border-radius: 0.1rem;
            border: 0.01rem solid rgba(229, 232, 237, 1);
            padding: 0.01rem;
            box-sizing: border-box;

            input {
              display: block;
              outline: none;
              border: none;
              width: 100%;
              height: 0.86rem;
              padding: 0.2rem 0.3rem;
              box-sizing: border-box;

              font-size: 0.28rem;
              font-family: "PingFangSC-Regular";
              font-weight: 400;
              color: rgba(34, 34, 34, 1);
            }
          }

          b {
            display: block;

            width: 1.84rem;
            height: 0.9rem;
            border-radius: 0.1rem;
            border: 0.01rem solid rgba(229, 232, 237, 1);

            box-sizing: border-box;
            margin-left: 0.2rem;
            font-size: 0.28rem;
            font-family: "PingFangSC-Regular";
            font-weight: 400;
            color: @mainColor;
            text-align: center;
            line-height: 0.9rem;
          }
          .loginYzmGray {
            // color: #f7f7fa;
            background: rgba(247, 247, 250, 1);
            color: rgba(199, 199, 199, 1);
          }
        }

        .loginBtn {
          display: block;
          width: 3.2rem;
          height: 0.9rem;
          background: @mainColor;
          text-align: center;
          line-height: 0.9rem;
          outline: none;
          border: none;
          font-size: 0.3rem;

          font-weight: 600;
          color: rgba(255, 255, 255, 1);
          margin: 0.5rem auto 0;
          border-radius: 0.45rem;
          letter-spacing: 2px;
        }
        .loginBtnGray {
          background: #f7f7fa;
        }
      }
    }
  }
}
</style>
